<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <button v-on:click="handleLink">跳转到关于页面</button>
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
  // @ is an alias to /src
  import { getCurrentInstance, onMounted, onUnmounted } from 'vue';
  import { useStore } from 'vuex';
  import HelloWorld from '@/components/HelloWorld.vue';

  export default {
    name: 'Home',
    components: {
      HelloWorld
    },
    setup () {
      const { ctx } = getCurrentInstance()
      const store = useStore()
      // ctx.$router 就是路由对象的实例
      const handleLink = () => {
        console.log(ctx)
        // ctx.$router.push('/about')
        ctx.$router.push('/about/123')
      }

      onMounted(() => {
        store.commit('hide')
        // this.$store.commit('hide')
      })

      onUnmounted(() => {
        store.commit('show')
        // this.$store.commit('show')
      })

      return {
        handleLink
      }
    }
  }
</script>
